<template>
  <view class="category-page">
    <!-- 顶部导航栏 -->
    <view class="header">
      <view class="header-content">
        <text class="header-title">分类商品</text>
        <view class="header-icons">
          <text class="header-icon">⋯</text>
          <text class="header-icon">−</text>
          <text class="header-icon">◎</text>
        </view>
      </view>
      <!-- 搜索栏 -->
      <view class="search-bar">
        <text class="search-icon">🔍</text>
        <input class="search-input" placeholder="搜索您想要的商品" />
      </view>
    </view>

    <!-- 主要内容区域 -->
    <view class="main-content">
      <!-- 左侧分类导航 -->
      <view class="category-sidebar">
        <view class="category-list">
          <view 
            class="category-item" 
            v-for="(category, index) in categories" 
            :key="index"
            :class="{ active: currentCategory === index }"
            @click="selectCategory(index)"
          >
            <text class="category-name">{{ category.name }}</text>
          </view>
        </view>
      </view>
      <!-- 右侧商品展示区域 -->
      <view class="product-content">
        <!-- 顶部横幅 -->
        <view class="banner-section" v-if="currentCategory === 0">
          <view class="banner">
            <view class="banner-text">
              <text class="banner-title">IPSA ♀女节</text>
              <text class="banner-desc">满水润 稳到底 七夕甜ME</text>
              <text class="banner-gift">赠ME乳液约1瓶正装量></text>
            </view>
            <view class="banner-products">
              <image class="banner-product" src="/static/balance/口红.png"></image>
              <image class="banner-product" src="/static/balance/口红.png"></image>
            </view>
          </view>
        </view>
        <!-- 品牌分类 -->
        <view class="section" v-if="currentCategory === 0">
          <text class="section-title">品牌分类</text>
          <view class="brand-grid">
            <view class="brand-item" v-for="(brand, index) in brands" :key="index" @click="goToBrandCategory(brand)">
              <image class="brand-image" :src="brand.image"></image>
              <text class="brand-name">{{ brand.name }}</text>
            </view>
          </view>
        </view>
        <!-- 彩妆分类 -->
        <view class="section" v-if="currentCategory === 0">
          <text class="section-title">彩妆</text>
          <view class="product-grid">
            <view class="product-item" v-for="(product, index) in makeupProducts" :key="index" @click="goToMakeupCategory(product)">
              <image class="product-image" :src="product.image"></image>
              <text class="product-name">{{ product.name }}</text>
            </view>
          </view>
        </view>
        <!-- 面部护肤 -->
        <view class="section" v-if="currentCategory === 0">
          <text class="section-title">面部护肤</text>
          <view class="product-grid">
            <view class="product-item" v-for="(product, index) in skincareProducts" :key="index" @click="goToSkincareCategory(product)">
              <image class="product-image" :src="product.image"></image>
              <text class="product-name">{{ product.name }}</text>
            </view>
          </view>
        </view>
        <!-- 热门推荐 -->
        <view class="section" v-if="currentCategory === 0">
          <text class="section-title">热门推荐</text>
          <view class="product-grid">
            <view class="product-item" v-for="(product, index) in hotProducts" :key="index" @click="goToProduct(product)">
              <image class="product-image" :src="product.image"></image>
              <text class="product-name">{{ product.name }}</text>
            </view>
          </view>
        </view>
        <!-- 其他分类的商品展示 -->
        <view class="section" v-if="currentCategory !== 0">
          <text class="section-title">{{ categories[currentCategory].name }}</text>
          <view class="product-grid">
            <view class="product-item" v-for="(product, index) in categoryProducts" :key="index" @click="goToProduct(product)">
              <image class="product-image" :src="product.image"></image>
              <text class="product-name">{{ product.name }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentCategory: 0,
      categories: [
        { name: '美妆护肤' },
        { name: '个护清洁' },
        { name: '居家餐厨' },
        { name: '玩具乐器' },
        { name: '医疗&健身...' },
        { name: '运动户外' },
        { name: '服饰鞋包' },
        { name: '黄金饰品' },
        { name: '水果' }
      ],
      brands: [
        { name: '所有品牌', image: '/static/balance/口红.png' },
        { name: 'YSL1', image: '/static/balance/口红.png' },
        { name: 'ASd234', image: '/static/balance/口红.png' },
        { name: '1022', image: '/static/balance/口红.png' },
        { name: '1234', image: '/static/balance/口红.png' }
      ],
      makeupProducts: [
        { id: 1, name: '新的分类', image: '/static/balance/口红.png' },
        { id: 2, name: '口红', image: '/static/balance/口红.png' }
      ],
      skincareProducts: [
        { id: 3, name: '彩妆套装', image: '/static/balance/口红.png' },
        { id: 4, name: '洁面', image: '/static/balance/口红.png' },
        { id: 5, name: '润唇膏', image: '/static/balance/口红.png' },
        { id: 6, name: '眼部精华', image: '/static/balance/口红.png' },
        { id: 7, name: '化妆水', image: '/static/balance/口红.png' },
        { id: 8, name: '护肤套装', image: '/static/balance/口红.png' },
        { id: 9, name: '防晒', image: '/static/balance/口红.png' }
      ],
      hotProducts: [
        { id: 10, name: '清洁卸妆', image: '/static/balance/口红.png' },
        { id: 11, name: '美妆工具', image: '/static/balance/口红.png' },
        { id: 12, name: '彩妆香氛', image: '/static/balance/口红.png' },
        { id: 13, name: '身体护肤', image: '/static/balance/口红.png' },
        { id: 14, name: '面膜1', image: '/static/balance/口红.png' },
        { id: 15, name: '护肤美肤', image: '/static/balance/口红.png' }
      ],
      categoryProducts: [
        { id: 16, name: '商品1', image: '/static/balance/口红.png' },
        { id: 17, name: '商品2', image: '/static/balance/口红.png' },
        { id: 18, name: '商品3', image: '/static/balance/口红.png' },
        { id: 19, name: '商品4', image: '/static/balance/口红.png' }
      ]
    }
  },
  methods: {
    selectCategory(index) {
      this.currentCategory = index;
    },
    goToProduct(product) {
      uni.navigateTo({
        url: `/pages/product/detail?id=${product.id}`
      });
    },
    goToBrandCategory(brand) {
      uni.navigateTo({
        url: `/pages/subcategory/subcategory?name=品牌分类&brand=${brand.name}`
      });
    },
    goToMakeupCategory(product) {
      uni.navigateTo({
        url: `/pages/subcategory/subcategory?name=彩妆&category=${product.name}`
      });
    },
    goToSkincareCategory(product) {
      uni.navigateTo({
        url: `/pages/subcategory/subcategory?name=面部护肤&category=${product.name}`
      });
    }
  }
}
</script>

<style scoped>
.category-page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
}

/* 顶部导航栏 */
.header {
  background-color: #fff;
  padding: 20rpx 30rpx;
  border-bottom: 1rpx solid #eee;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.header-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.header-icons {
  display: flex;
  gap: 20rpx;
}

.header-icon {
  font-size: 32rpx;
  color: #666;
}

/* 搜索栏 */
.search-bar {
  display: flex;
  align-items: center;
  background-color: #f8f8f8;
  border-radius: 40rpx;
  padding: 20rpx 30rpx;
}

.search-icon {
  font-size: 32rpx;
  color: #999;
  margin-right: 20rpx;
}

.search-input {
  flex: 1;
  font-size: 28rpx;
  color: #333;
}

/* 主要内容区域 */
.main-content {
  flex: 1;
  display: flex;
  overflow: hidden;
}

/* 左侧分类导航 */
.category-sidebar {
  width: 200rpx;
  background-color: #fff;
  border-right: 1rpx solid #eee;
}

.category-list {
  height: 100%;
  overflow-y: auto;
}

.category-item {
  padding: 30rpx 20rpx;
  border-bottom: 1rpx solid #f5f5f5;
  position: relative;
}

.category-item.active {
  background-color: #fff;
  color: #ff3838;
  font-weight: bold;
}

.category-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6rpx;
  height: 40rpx;
  background-color: #ff3838;
  border-radius: 0 4rpx 4rpx 0;
}

.category-name {
  font-size: 28rpx;
  color: #333;
}

.category-item.active .category-name {
  color: #ff3838;
  font-weight: bold;
}

/* 右侧商品展示区域 */
.product-content {
  flex: 1;
  background-color: #fff;
  padding: 20rpx;
  overflow-y: auto;
}

/* 横幅区域 */
.banner-section {
  margin-bottom: 40rpx;
}

.banner {
  background: linear-gradient(135deg, #ffb3d9, #ff99cc);
  border-radius: 20rpx;
  padding: 40rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.banner::before {
  content: '🌸';
  position: absolute;
  top: 20rpx;
  right: 20rpx;
  font-size: 60rpx;
  opacity: 0.3;
}

.banner-text {
  flex: 1;
}

.banner-title {
  display: block;
  font-size: 32rpx;
  font-weight: bold;
  color: #fff;
  margin-bottom: 10rpx;
}

.banner-desc {
  display: block;
  font-size: 24rpx;
  color: #fff;
  margin-bottom: 10rpx;
}

.banner-gift {
  display: block;
  font-size: 24rpx;
  color: #fff;
}

.banner-products {
  display: flex;
  gap: 20rpx;
}

.banner-product {
  width: 80rpx;
  height: 120rpx;
  border-radius: 10rpx;
}

/* 分类区域 */
.section {
  margin-bottom: 40rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
  display: block;
}

/* 品牌网格 */
.brand-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20rpx;
}

.brand-item {
  text-align: center;
}

.brand-image {
  width: 100rpx;
  height: 100rpx;
  border-radius: 20rpx;
  margin-bottom: 10rpx;
}

.brand-name {
  font-size: 24rpx;
  color: #333;
}

/* 商品网格 */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20rpx;
}

.product-item {
  text-align: center;
}

.product-image {
  width: 120rpx;
  height: 120rpx;
  border-radius: 20rpx;
  margin-bottom: 10rpx;
}

.product-name {
  font-size: 24rpx;
  color: #333;
  line-height: 1.2;
}


</style> 